<script lang="ts" setup>
import type { DialogModel, DrawerModel, Menu, Role } from '@/index.d';
import MenuTree from './MenuTree.vue';
import PermissionList from './PermissionList.vue';

const drawerModel = defineModel<DialogModel<Menu>>('drawerModel', { required: true });
const currentRole = defineModel<Role>('currentRole', { required: true });
const currentMenu = reactive<Menu>({
  type: 'item',
  path: '',
  name: '',
  fullPath: '',
  title: '用户管理',
  icon: '',
  isShow: true
});
</script>
<template>
  <el-drawer v-model="drawerModel.visible" size="60%" :title="`为${drawerModel.title}分配权限`">
    <el-space>
      <el-card shadow="hover" class="menu-tree">
        <template #header>菜单树 </template>
        <template #default>
          <MenuTree v-model:current-role="currentRole" v-model:current-menu="currentMenu" />
        </template>
      </el-card>
      <el-card shadow="hover" class="button-table">
        <template #header>{{ currentMenu.title }}权限列表 </template>
        <template #default>
          <PermissionList v-model:current-menu="currentMenu" v-model:current-role="currentRole" />
        </template>
      </el-card>
    </el-space>
  </el-drawer>
</template>
<style lang="scss" scoped>
.el-space {
  display: flex;
  height: 100%;

  :deep(> .el-space__item) {
    height: 100%;
    > .el-card {
      height: 100%;
    }
  }

  > *:first-child {
    flex: 1;
  }

  > *:last-child {
    flex: 2;
  }
}
</style>
